<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="城市名称">
          <a-row :gutter="24">
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-select placeholder="全部省" @change="provinceIdChange" v-model="province" :disabled="cityDisabled">
                <a-select-option :value="item.name" v-for="(item, index) in provinceUl" :idt="item.id" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-select placeholder="全部市" v-model="city" :disabled="cityDisabled">
                <a-select-option :value="item.name" v-for="(item, index) in cityUl" :idt="item.id" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="首字母">
          <a-input placeholder="请输入首字母" v-decorator="['first', validatorRules.first]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-switch v-model="status" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/common/city';
import ImageUpload from '@/components/ImageUpload';

import { Slime } from '@/mixins/slime';
export default {
  name: 'cityModal',
  mixins: [Slime],
  components: {
    ImageUpload,
  },
  data() {
    return {
      title: '操作',
      id: 0,
      model: {},
      form: this.$form.createForm(this),
      provinceUl: [],
      province:'',
      cityUl: [],
      city:'',
      cityDisabled:false,
      validatorRules: {
        // name: { rules: [{ required: true, message: '请输入城市名称!' }] },
        first: { rules: [{ required: true, message: '请输入首字母!' }] },
      },
      status: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      ApiTree.regionList(0)
        .then((res) => {
          let provinceUl = []
          let data = res.result
          data.map((obj)=>{
            let li = {
              name: obj.name,
              id: obj.id,
              val: obj.code,
            }
            provinceUl.push(li)
          })
          this.provinceUl = provinceUl
        })
        .finally(() => {});
    },
    provinceIdChange(value, option) {
      let provinceId = option.data.attrs.idt;
      ApiTree.regionList(provinceId)
      .then((res) => {
          let cityUl = []
          let data = res.result
          data.map((obj)=>{
            let li = {
              name: obj.name,
              id: obj.id,
              val: obj.code,
            }
            cityUl.push(li)
          })
          this.cityUl = cityUl
        })
        .finally(() => {});
    },
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields(); //重新设置领域
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          first: record.first,
        });
        this.city = record.name
        this.id = record.id;
        this.status = record.status == 1 ? true : false;
      });
      if(record.id){
        this.cityDisabled = true
      }else{
        this.cityDisabled = false
      }
    },
    // 提交
    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          const param = {
            ...values,
            name: that.city,
            status: that.status ? 1 : 0,
            id: that.id,
          };
          if (!that.id) {
            that.submitCreate(param);
          } else {
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    handleCancel() {
      this.closeModal();
    },
    // 弹窗-关闭
    closeModal() {
      this.province = ''
      this.cityUl = []
      this.confirmLoading = false;

      this.visible = false;
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style lang="less" scoped>
</style>